<template>
  <div>
    <el-dialog
      title="设置上传通道"
      :visible.sync="channelShow"
      width="70%"
      :before-close="handleClose"
    >
      <div>
        <el-row :gutter="20">
          <el-col :span="8">
            <div>
              <div class="m-b-10">消防通道入口地址：</div>
              <div>
                <el-input
                  size="small"
                  v-model="dataForm.fireEnterAddress"
                ></el-input>
              </div>
            </div>
            <div>
              <div>
                消防通道入口经度/纬度：<el-button
                  type="text"
                  @click="getLngLat(1)"
                  >百度地图</el-button
                ><el-button type="text" @click="getLngLat(2)"
                  >腾讯地图</el-button
                >
              </div>
              <div class="m-b-10">
                <el-row :gutter="20">
                  <el-col :span="12">
                    <el-input
                      placeholder="经度"
                      size="small"
                      v-model="dataForm.fireEnterLng"
                    ></el-input
                  ></el-col>
                  <el-col :span="12">
                    <el-input
                      placeholder="纬度"
                      size="small"
                      v-model="dataForm.fireEnterLat"
                    ></el-input
                  ></el-col>
                </el-row>
              </div>
            </div>
            <div class="m-t-10">
              <div class="m-b-10">消防通道入口图片：</div>
              <upload-img
                class="upload-img"
                @uploadFileList="getsiteUrl($event, 1)"
                folder="villageArea"
              >
                <img
                  v-if="dataForm.fireEnterPicture"
                  width="100%"
                  :src="dataForm.fireEnterPicture"
                  alt=""
                />
                <div class="tip">
                  <i
                    class="el-icon-upload"
                    v-if="!dataForm.fireEnterPicture"
                  ></i>
                  <div
                    v-if="!dataForm.fireEnterPicture"
                    class="el-upload__text"
                  >
                    将图片拖到此处，或<em>点击上传</em>
                  </div>
                </div>
              </upload-img>
            </div>
          </el-col>
          <el-col :span="8">
            <div>
              <div class="m-b-10">急救通道入口地址：</div>
              <div>
                <el-input
                  size="small"
                  v-model="dataForm.aidEnterAddress"
                ></el-input>
              </div>
            </div>
            <div>
              <div>
                急救通道入口经度/纬度：<el-button
                  type="text"
                  @click="getLngLat(1)"
                  >百度地图</el-button
                ><el-button type="text" @click="getLngLat(2)"
                  >腾讯地图</el-button
                >
              </div>
              <div class="m-b-10">
                <el-row :gutter="20">
                  <el-col :span="12">
                    <el-input
                      placeholder="经度"
                      size="small"
                      v-model="dataForm.aidEnterLng"
                    ></el-input
                  ></el-col>
                  <el-col :span="12">
                    <el-input
                      placeholder="纬度"
                      size="small"
                      v-model="dataForm.aidEnterLat"
                    ></el-input
                  ></el-col>
                </el-row>
              </div>
            </div>
            <div class="m-t-10">
              <div class="m-b-10">急救通道入口图片：</div>
              <upload-img
                class="upload-img"
                @uploadFileList="getsiteUrl($event, 2)"
                folder="villageArea"
              >
                <img
                  v-if="dataForm.aidEnterPicture"
                  width="100%"
                  :src="dataForm.aidEnterPicture"
                  alt=""
                />
                <div class="tip">
                  <i
                    class="el-icon-upload"
                    v-if="!dataForm.aidEnterPicture"
                  ></i>
                  <div v-if="!dataForm.aidEnterPicture" class="el-upload__text">
                    将图片拖到此处，或<em>点击上传</em>
                  </div>
                </div>
              </upload-img>
            </div>
          </el-col>
          <el-col :span="8">
            <div>
              <div class="m-b-10">110通道入口地址：</div>
              <div>
                <el-input
                  size="small"
                  v-model="dataForm.policeEnterAddress"
                ></el-input>
              </div>
            </div>
            <div>
              <div>
                110通道入口经度/纬度：<el-button
                  type="text"
                  @click="getLngLat(1)"
                  >百度地图</el-button
                ><el-button type="text" @click="getLngLat(2)"
                  >腾讯地图</el-button
                >
              </div>
              <div class="m-b-10">
                <el-row :gutter="20">
                  <el-col :span="12">
                    <el-input
                      placeholder="经度"
                      size="small"
                      v-model="dataForm.policeEnterLng"
                    ></el-input
                  ></el-col>
                  <el-col :span="12">
                    <el-input
                      placeholder="纬度"
                      size="small"
                      v-model="dataForm.policeEnterLat"
                    ></el-input
                  ></el-col>
                </el-row>
              </div>
            </div>
            <div class="m-t-10">
              <div class="m-b-10">110通道入口图片：</div>
              <upload-img
                class="upload-img"
                @uploadFileList="getsiteUrl($event, 3)"
                folder="villageArea"
              >
                <img
                  v-if="dataForm.policeEnterPicture"
                  width="100%"
                  :src="dataForm.policeEnterPicture"
                  alt=""
                />
                <div class="tip">
                  <i
                    class="el-icon-upload"
                    v-if="!dataForm.policeEnterPicture"
                  ></i>
                  <div
                    v-if="!dataForm.policeEnterPicture"
                    class="el-upload__text"
                  >
                    将图片拖到此处，或<em>点击上传</em>
                  </div>
                </div>
              </upload-img>
            </div>
          </el-col>
        </el-row>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="handleClose">取 消</el-button>
        <el-button type="primary" @click="handleConfirm">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import UploadImg from "@/components/UploadImg";
import ChannelApi from "@/api/address/channel";

export default {
  props: {
    idArr: {
      type: Array,
      default: [],
    },
    channelShow: {
      type: Boolean,
      default: false,
    },
    type: {
      type: String,
      default: 1, //1小区管理 2栋单元层管理
    },
  },
  components: {
    UploadImg,
  },
  watch: {
    idArr(newValue, oldValue) {},
    channelShow(newValue, oldValue) {
      console.log(newValue)
      if (newValue) {
        if (this.idArr.length == 1) {
          this.getChannel();
        }
      }
    },
  },
  data() {
    return {
      dataForm: {
        fireEnterAddress: "", // '消防通道入口地址',
        fireEnterPicture: "", // '消防通道入口图',
        fireEnterLng: "", //'消防通道入口经度',
        fireEnterLat: "", // '消防通道入口纬度',
        aidEnterAddress: "", // '急救通道入口地址',
        aidEnterPicture: "", // '急救通道入口图',
        aidEnterLng: "", //'急救通道入口经度',
        aidEnterLat: "", //'急救通道入口纬度',
        policeEnterAddress: "", //'110通道入口地址',
        policeEnterPicture: "", //110通道入口图',
        policeEnterLng: "", //'110通道入口经度',
        policeEnterLat: "", //'110通道入口纬度',
      },
    };
  },
  methods: {
    getChannel() {
      let data = {};
      if (this.type == 1) {
        data.villageId = this.idArr[0];
      } else {
        data.areaId = this.idArr[0];
      }
      ChannelApi.getChannel(data).then((res) => {
        if (res.status == 0) {
          this.dataForm = {
            fireEnterAddress: res.data.fireEnterAddress, // '消防通道入口地址',
            fireEnterPicture: res.data.fireEnterPicture, // '消防通道入口图',
            fireEnterLng: res.data.fireEnterLng, //'消防通道入口经度',
            fireEnterLat: res.data.fireEnterLat, // '消防通道入口纬度',
            aidEnterAddress: res.data.aidEnterAddress, // '急救通道入口地址',
            aidEnterPicture: res.data.aidEnterPicture, // '急救通道入口图',
            aidEnterLng: res.data.aidEnterLng, //'急救通道入口经度',
            aidEnterLat: res.data.aidEnterLat, //'急救通道入口纬度',
            policeEnterAddress: res.data.policeEnterAddress, //'110通道入口地址',
            policeEnterPicture: res.data.policeEnterPicture, //110通道入口图',
            policeEnterLng: res.data.policeEnterLng, //'110通道入口经度',
            policeEnterLat: res.data.policeEnterLat, //'110通道入口纬度',
          };
        }
      });
    },
    clearInfo() {
      this.dataForm = {
        fireEnterAddress: "", // '消防通道入口地址',
        fireEnterPicture: "", // '消防通道入口图',
        fireEnterLng: "", //'消防通道入口经度',
        fireEnterLat: "", // '消防通道入口纬度',
        aidEnterAddress: "", // '急救通道入口地址',
        aidEnterPicture: "", // '急救通道入口图',
        aidEnterLng: "", //'急救通道入口经度',
        aidEnterLat: "", //'急救通道入口纬度',
        policeEnterAddress: "", //'110通道入口地址',
        policeEnterPicture: "", //110通道入口图',
        policeEnterLng: "", //'110通道入口经度',
        policeEnterLat: "", //'110通道入口纬度',
      };
    },
    handleClose() {
      this.$emit("handleClose", false);
      this.clearInfo();
    },
    handleConfirm() {
      let ids = this.idArr.join(",");
      let data = this.dataForm;
      if (this.type == 1) {
        data.villageIds = ids;
      } else {
        data.areaIds = ids;
      }
      ChannelApi.addChannel(data).then((res) => {
        if (res.status == 0) {
          this.$message.success("操作成功");
          this.clearInfo();
          this.$emit("handleConfirm", false);
        }
      });
    },
    getsiteUrl(val, i) {
      if (val.length > 0) {
        this.$Utils.notifySuccess("上传成功");
      }
      switch (i) {
        case 1:
          this.dataForm.fireEnterPicture = val[0];
          break;
        case 2:
          this.dataForm.aidEnterPicture = val[0];
          break;
        case 3:
          this.dataForm.policeEnterPicture = val[0];
          break;
      }
    },
    getLngLat(type) {
      if (type == 1) {
        window.open(
          "https://api.map.baidu.com/lbsapi/getpoint/index.html",
          "_blank"
        );
      } else {
        window.open("https://lbs.qq.com/getPoint", "_blank");
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.m-t-10 {
  margin-top: 10px;
}
.m-b-10 {
  margin-bottom: 10px;
}
</style>
